<template>
  <el-form ref="login" :model="login" :rules="rules" class="login-form" size="medium" v-bind="$attrs">
    <h3 class="title">
      <span>登录</span>
      <span>KEEP FIT</span>
    </h3>
    <el-form-item prop="username">
      <el-input v-model="login.username" type="text" auto-complete="off" placeholder="请输入账号">
        <span slot="prefix">
          <i class="iconfont icon-zhanghao" />
        </span>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="login.password" :type="passShow ? 'text' : 'password'" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
        <span slot="prefix">
          <i class="iconfont icon-mima" />
        </span>
        <span slot="suffix" class="check-pass" @click="handleCheckPass">
          <i :class="passShow?'iconfont icon-yanjing_kai':'iconfont icon-yanjing-bi'" />
        </span>
      </el-input>
    </el-form-item>
    <!-- 验证码 -->
    <el-form-item prop="code" class="login-code-box">
      <el-input v-model="login.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin">
        <span slot="prefix">
          <i class="iconfont icon-yanzhengma" />
        </span>
      </el-input>
      <!--验证码组件-->
      <div class="login-code" @click="refreshCode">
        <s-identify :identify-code="identifyCode" />
      </div>
    </el-form-item>
    <!-- 选择平台 -->
    <!-- <el-form-item v-if="hasPlatform && value" prop="appId">
      <el-select v-model="login.appId" placeholder="请选择平台" style="width:100%;">
        <el-option v-for="(item,index) in platform" :key="index" :label="item.fullName" :value="item.id" />
        <span slot="prefix">
          <svg-icon class="login-icon" icon-class="appstore" />
        </span>
      </el-select>
    </el-form-item> -->
    <!-- 记住密码 -->
    <el-row>
      <el-col :span="24">
        <el-checkbox v-model="rememberMe" style="margin:0 0 24px 0;">记住密码</el-checkbox>
      </el-col>
    </el-row>
    <el-form-item style="width:100%;">
      <el-button class="submit-login-btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">
        <span v-if="!loading">登 录</span>
        <span v-else>登 录 中...</span>
      </el-button>
    </el-form-item>
    <!-- <div class="other-login">
      <div class="login-platform-wrapper">
        <div class="login-platform-item">
          <div class="icon wechat" />
          <div class="name">微信登录</div>
        </div>
      </div>
    </div> -->
    <slot />
  </el-form>
</template>
<script>
import SIdentify from '../../components/sidentify.vue';
export default {
  components: {
    SIdentify,
  },
  data() {
    return {
      login: {
        username: 'admin',
        password: 'admin',
      },
      // codeUrl: "",
      // cookiePassword: "",
      // value: false,
      identifyCodes: "1234567890",
      identifyCode: "",
      // code: " ", // text框输入的验证码
      // platform: [],
      rememberMe: '',
      loading: false,
      passShow: false,
      ddVisible: false,
      appId: "",
      fullscreenLoading: false,
      hospitalList: [],
      values: "",
      hospitalName: "",
      rules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
    };
  },
  created() {
    // 初始化验证码
    this.refreshCode();
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    handleCheckPass() {
      this.passShow = !this.passShow;
    },
    // 验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    },
    // 监听登录
    handleLogin() {
      this.$refs.login.validate(async(valid) => {
        if (valid) {
          if (this.login.code !== this.identifyCode) {
            this.login.code = '';
            this.refreshCode();
            this.$message({
              message: '请输入正确的验证码！',
              duration: 2000,
              type: 'waring',
            });
            return;
          } else if (this.login.username !== 'admin') {
            this.$message({
              message: '您输入的账号不正确！',
              duration: 2000,
              type: 'error',
            });
            return;
          } else if (this.login.password !== 'admin') {
            this.$message({
              message: '您输入的密码不正确！',
              duration: 2000,
              type: 'error',
            });
            return;
          }
          this.loading = true;
          const time = setTimeout(() => {
            this.$router.push('/home'); // 验证通过跳转首页
            this.loading = false;
            clearTimeout(time);
          }, 1000);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login-form{
   overflow: hidden;
  .title {
    text-align: center;
    margin-bottom: 20px;
    > span:first-child {
      margin-right: 10px;
    }
  }
}
 /*验证码样式*/
 ::v-deep .login-code-box .el-form-item__content{
    display: flex;
 }
input {
  border-width: 0px !important;
}

.login-form .submit-login-btn {
  width: 100%;
}
</style>
